<template>
  <div class="commonList" v-if="list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="(item) in list" :key="item.id"
      @click="goToDetail(item.id)"
      >
        <div>
          <img
            :src="
              'https://chadian-img.oss-cn-shanghai.aliyuncs.com/' +
              item.picurl +
              '?x-oss-process=image/resize,m_fill,w_300,h_300'
            "
            style="width: 180px; height: 180px; vertical-align: top"
          />
          <div class="m-goods">
            <div class="m-goods-title">
              <span class="m-goods__tag" v-if="item.isvirtual != 0">严选</span>
              <span class="m-goods__tag" v-if="item.biaoqian">V店</span>
              <span class="m-goods__tag" v-if="item.biaoqian"></span>
              <span>{{ item.productname }}</span>
            </div>
            <div class="m-goods-emails">
              <div class="m-goods-manjian">
                <p class="m-goods-email">包邮</p>
                <p class="m-goods-email" v-if="item.skucount == 2">满减</p>
              </div>
              <p class="m-goods-detail">{{ item.region }}</p>
            </div>
            <div class="m-goods-pros">
              <div class="m-goods-pro">
                <span class="m-price__currency">￥</span>
                <span class="m-price__integer">{{ item.memberprice }}</span>
              </div>
              <span class="m-goods-already">{{ item.buycount }}人付款</span>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
console.log(1114);
import { GetGoodsList,GetHomeGoodsList } from "../api/xly-api";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      num: 1,
      number:1
    };
  },
  props: ["Type"],
  created() {
    // console.log(this.$route.query.goodsId);
  },
  methods: {
    onLoad() {
      let id = this.num;
      let nid = this.number
      if (this.$route.query.goodsId) {
        let goodsId = this.$route.query.goodsId
        GetGoodsList({goodsId,id}).then((res) => {
          let m = res.data.data.list;
          if (m.length) {
            this.num++;
            this.list = [...this.list, ...res.data.data.list];
            // console.log(this.list);
          } else {
            this.finished = true;
          }
          this.loading = false;
        });
      }else if(this.Type){
        let goodsId = this.Type
        console.log(goodsId,nid)
        GetHomeGoodsList({goodsId,nid}).then((res) => {
          let m = res.data.data.list
          // console.log(m);
          if (m.length) {
            this.num++;
            this.list = [...this.list, ...res.data.data.list];
            // console.log(this.list);
          } else {
            this.finished = true;
          }
          this.loading = false;
        });
      }
    },
    goToDetail(id) {
      this.$router.push({path:"/detail",query:{detailId:id}});
    },
  },
};
</script>
<style src='../assets/css/CommList.css' scoped>
</style>
<style lang="less" scoped>
.m-goods-title {
  height: 3rem;
}
.commonList {
  font-size: 20px;
  padding: 0 5px;
  background-color: #eee;
}
.van-cell__value--alone {
  border-radius: 0.7rem;
  overflow: hidden;
}
.van-cell {
  width: 50%;
  display: inline-block;
  padding: 5px;
  border-radius: 0.7rem;
  overflow: hidden;
  background-color: #eee;
}
.m-goods {
  background-color: #fff;
  /* padding: .2rem; */
}
.m-goods__tag {
  margin-right: 0.20667rem;
  display: inline-block;
  color: #fff;
  font-size: 0.7em;
  font-weight: 400;
  line-height: 1rem;
  padding: 0 0.30667rem;
  border-radius: 0.20667rem;
  vertical-align: 0.5333rem;
  background-color: #ee0a24;
  position: relative;
  top: 0.44rem;
}
.m-goods-title {
  padding: 0.21333rem 0.5rem;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.van-nav-bar {
  height: 2rem;
}
.m-goods-emails {
  display: flex;
  justify-content: space-between;
  height: 1.2rem;
  padding: 0 0.5rem;
}
.m-goods-email {
  border: 1px solid #ee0a24;
  border-radius: 0.6rem;
  padding: 0 0.2rem;
  line-height: 1.1rem;
  margin: 0;
  color: #ee0a24;
  font-size: 0.6rem;
  margin-right: 0.2rem;
}
.m-goods-detail {
  margin: 0;
  color: #969799;
  font-size: 0.6rem;
}
.m-price__integer {
  color: #ee0a24;
  font-size: 1rem;
}
.m-price__currency {
  font-size: 0.6rem;
  color: #ee0a24;
}
.m-goods-pros {
  display: flex;
  padding: 0 0.5rem;
}
.m-goods-already {
  color: #969799;
  font-size: 0.6rem;
  margin-left: 0.5rem;
  position: relative;
  top: 0.044rem;
}
.m-goods-manjian {
  display: flex;
}
</style>